<template>
  <div class="loverPerson-container">
    <van-nav-bar fixed>
      <template #left>
        <span @click="$router.back()">
          <svg-icon style="margin-left: 10px;" icon-class='fanhui' width="30px" height="30px" class="icon"/>
        </span>
      </template>
      <template #right>
        <input type="file" hidden ref="file" @change="onFileChange"/>
        <span @click="$refs['file'].click()">
         <svg-icon icon-class='duijie' width="30px" height="30px" class="icon"/>
        </span>
      </template>
    </van-nav-bar>
    <!--  背景图  -->
    <div class="img-warp">
      <van-image fit="cover" :src="userBg_pic ?userBg_pic: 'https://img01.yzcdn.cn/vant/cat.jpeg'"/>
    </div>
    <div class="userinfo">
      <div class="infoTop">
        <span>{{ userInfo.username }}</span>
        <van-image fit="cover" width="3.5em" height="3.5em" :src="userInfo.user_pic"/>
      </div>
      <p>{{ userInfo.signature }}</p>
    </div>

    <!--  用户动态display  -->
    <van-tabs v-model="active">
      <van-tab title="动态">
        <personMic></personMic>
      </van-tab>
      <van-tab title="点赞">
        <likeMic></likeMic>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>

import { addCoverAPI, postUserInfoAPI } from '@/api'
import personMic from '../components/personMic.vue'
import likeMic from '../components/likeMic.vue'
// import { handleScroll } from 'vue-router/src/util/scroll'

export default {
  name: 'loverPerson',
  data () {
    return {
      userBg_pic: 'http://127.0.0.1:9090/1683029458610-bg.jpg',
      userInfo: {},
      loverInfo: {},
      active: 0,
      scrollTop: 0
    }
  },
  components: {
    personMic,
    likeMic
  },
  created () {
    // console.log(this.$route.params.userId)
    this.postUserInfo()
  },
  methods: {
    async postUserInfo () {
      const { data: res } = await postUserInfoAPI({
        userId: this.$route.params.userId
      })
      this.loverInfo = res.loverData
      this.userInfo = res.data
      console.log(this.loverInfo)
      console.log(this.userInfo)
    },
    // 发送图片
    async onFileChange () {
      // 将输入框中的图片存储到数据中
      // 1. 获取文件对象
      const file = this.$refs.file.files[0]
      // 此时可以自行将文件上传至服务器
      const imgFile = new FormData()
      imgFile.append('fileType', 'IMAGE')
      imgFile.append('file', file)
      const { data: res } = await addCoverAPI(imgFile)
      console.log(res.url)
      this.userBg_pic = res.url
    }
  }
}
</script>

<style scoped lang="less">
.loverPerson-container {
  height: 100vh;
  background-color: #fff;

  .van-nav-bar {
    color: #fff;
    background-color: transparent;

    &::after {
      border: none;
    }
  }

  .img-warp {
    position: absolute;
    top: 0;
    width: 100vw;

    .van-image {
      height: 225px;
      width: 100%;
    }
  }

  .userinfo {
    position: absolute;
    right: 10px;
    top: 190px;
    font-size: 16px;
    color: #fff;
    font-weight: bold;

    .infoTop {
      display: flex;
      align-items: start;
      justify-content: space-between;

      span {
        padding-top: 8px;
      }

      ::v-deep .van-image__img {
        border-radius: 5px;
      }
    }

    p {
      font-size: 12px;
      color: #b4b4b4;
      font-weight: normal;
    }
  }

  ::v-deep .van-tabs {
    position: absolute;
    top: 290px;
    width: 100%;
    background-color: transparent;
    left: 5px;
    font-size: 14px;

    .van-tabs__wrap {
      width: 40%;
      margin-left: 30px;
    }

    .van-tabs__line {
      display: none;
    }

    .van-tab--active {
      font-size: 18px;
      font-weight: bolder;
      color: #ac92eb;
    }

    .van-tabs__nav {
      background-color: transparent;
    }

    .van-tabs__content {
      width: 100%;
    }
  }
}
</style>
